<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>Vue.js</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>

    <body>

        <div  class="app1">
            <a :href="message" :value="message">aaaaaaaaaa</a>
            ---| [[message]] |---

            <div id="app2">
              ~~~ |  [[message2]]  | ~~~
            </div>
        </div>


        <script type="text/javascript">
            var vue1 = new Vue({
                    el: '.app1',
                    data() {
                        console.log('~~~~~~~~~~~ 123')
                        return {
                            message: "This is Vue1"
                        }
                    },
                    delimiters: ['[[',']]']
                });

            var vue2 = new Vue({
            el: '#app2',
            data() {
                return {
                    message2: "This is Vue2"
                }
            },
            delimiters: ['[[',']]']
        });
        </script>
    </body>

</html>
